<template>
  <div class="user-card">
    <el-card shadow="hover" style="width: 400px">
      <template #header>
        <div class="card-header">
          用户信息
          <el-button type="text" @click="isEditing = !isEditing">
            {{ isEditing ? "取消" : "编辑" }}
          </el-button>
        </div>
      </template>

      <el-form
        label-position="right"
        :model="userInfo"
        :rules="rules"
        ref="userInfoForm"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="用户名" prop="username">
              <el-input v-if="isEditing" v-model="userInfo.username" />
              <span v-else>{{ userInfo.username }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="邮箱">
              <span>{{ userInfo.email }}</span>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="年龄">
              <span>{{ userInfo.age }}</span>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="生日" prop="birthday">
              <el-date-picker
                v-if="isEditing"
                v-model="userInfo.birthday"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              />
              <span v-else>{{ userInfo.birthday }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="创建时间">
              <span>{{ userInfo.created_at }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="等级">
              <span>{{ userInfo.level }}</span>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="博客数量">
              <span>{{ userInfo.blogCount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="被浏览数">
              <span>{{ userInfo.viewCount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="被赞数">
              <span>{{ userInfo.likeCount }}</span>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>

      <template v-if="isEditing">
        <div slot="footer" class="dialog-footer">
          <el-button @click="isEditing = false">取消</el-button>
          <el-button type="primary" @click="saveChanges(userInfoForm)"
            >保存</el-button
          >
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from "vue";
  import type { FormInstance } from "element-plus";
  import { useUserStore } from "@/stores/user";
  import { apiUserGet, apiUserUpdate } from "@/api/user";
  import { type UserInfo, userInfoDefault } from "@/types/user";

  const userInfo = reactive<UserInfo>(userInfoDefault());

  // 用嵌套方式可以对userInfo整体赋值，但form中使用不便
  // const state = reactive({
  //   userInfo: userInfoDefault(),
  // }

  const isEditing = ref(false);
  const rules = ref({});

  const userStore = useUserStore();

  const userInfoForm = ref<FormInstance>();
  const saveChanges = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(async (valid: boolean) => {
      if (valid) {
        try {
          await apiUserUpdate(userInfo);
        } catch (e) {
          alert(e);
        }

        alert("保存成功！");
        isEditing.value = false;
      } else {
        console.log("表单验证失败");
      }
    });
  };

  // 页面加载时获取用户数据
  onMounted(async () => {
    try {
      const _userInfo = await apiUserGet(userStore.userId);
      if (_userInfo.user_id !== "") {
        // 因为不能整体赋值，这里有不便
        userInfo.user_id = _userInfo.user_id;
        userInfo.username = _userInfo.username;
        userInfo.email = _userInfo.email;
        userInfo.birthday = _userInfo.birthday;
        userInfo.level = _userInfo.level;
        userInfo.created_at = _userInfo.created_at;
      }
    } catch (err) {
      alert(err);
    }
  });
</script>

<style scoped>
  .user-card {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* 调整表单项的布局 */
  .el-form-item__label {
    text-align: right;
    padding-right: 10px;
  }

  .el-form-item__content {
    margin-left: 80px;
  }
</style>
